<template>
<div class="course-panel" 
draggable="true" 
@dragstart="handleDragStart" 
@dragend="handleDragEnd"
 :data-key="courseKey"
>
 <h1>   {{courseName}}</h1>  
 <span class="remove-btn">x</span>
</div>
</template>
<script setup>
const props =defineProps({
    courseName: {
        type: String,
        default: 'Null'
    },
    courseKey: {
        type: String,
        default: 'Null'
    }
});
const emit = defineEmits(['handleDragEnd'])
function handleDragStart(e) {
    const tar = e.target
    tar.style.opacity = '.6';
}
function handleDragEnd(e) {
    const tar = e.target
    tar.style.opacity = '1';
    emit('handleDragEnd',tar)

}
</script>
<style lang="scss" scoped>
.course-panel{
    position: relative;
    width:150px;
    height: 100px;
    background-color: orange;
    margin:10px auto;
    padding: 10px;
    box-sizing: border-box;
    cursor: move;

    h1{
        font-size: 20px;
        font-weight: normal;
        text-align: center;
    }
    .remove-btn{
        position: absolute;
        top: 0px;
        right: 10px;
        font-size: 20px;
        color: #fff;
        cursor: pointer;
        font-style: normal;
    }
}
</style>